<template>
  <div>
    <van-nav-bar fixed title="待结算奖励" left-arrow class="color-white bg-primary" @click-left="$utils.back($route.path)" />
    <div class="has-top pos-r ">
      <div class="pos-r pt-25">
        <div class="pos-a bg-box" />
        <div class="out-box">
          <div class="inner-box" :style="{backgroundImage:'url('+require('@/assets/images/pendingReward.png')+')',backgroundSize:'100% 100%'}">
            <p class="pb-28">累计待结算金额</p>
            <p><span class="fs-72">{{ TotalMoney }}</span>/元</p>
          </div>
        </div>
      </div>
      <div class="mlr-25">
        <div class="flex-s-c mt-35">
          <p class="fs-36 fw-600">奖励明细</p>
          <div>
            <div
              class="date-box bg-gray-1 dis-inb flex-s-c plr-20 br-25 flex-s-0 flex-g-0 ml-20"
              :class="active==1?'bg-primary':''"
              @click="openDateSelect(1)"

            >
              <span>全部</span>
            </div>
            <div
              :class="active==2?'bg-primary':''"
              class="date-box bg-gray-1 dis-inb flex-s-c plr-20 br-25 flex-s-0 flex-g-0 ml-20"
              @click="openDateSelect(2)"
            >
              <span>{{ datetime }}</span>
              <van-icon :name="Icon" size="12" />
            </div>
          </div>

        </div>
        <ul class="mt-30">
          <li v-for="(item,index) in RewardList" :key="index" class="mt-12 br-12 bg-white ptb-30 plr-20">
            <p>备注：{{ item.Remark }}</p>
            <div class="mt-30 flex-s-c content">
              <span v-show="item.IsShowInvit" class="color-black fs-28 fw-b">需直推单数：<span class="fs-36">{{ item.NeedInvitCount }}</span></span>
              <span v-show="item.IsShowInvit" class="color-black fs-28 fw-b">已直推单数：<span class="fs-36">{{ item.InvitCount||0 }}</span></span>
              <span v-show="!item.IsShowInvit" class="color-black fs-28 fw-b">奖励类型：{{ item.MoneyLogTypeName }}</span>
              <span class="color-primary fs-40">+{{ item.RewardMoney }}</span>
            </div>
          </li>

        </ul>
        <no-data v-if="RewardList.length === 0" />
        <p v-if="end === true && RewardList.length !== 0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
        <datetime-select
          type="year-month"
          title="请选择时间"
          :show="dateSelect"
          @onConfirm="onConfirm"
          @clickOverlay="clickOverlay"
        />
      </div>
    </div>
  </div>
</template>

<script>
import datetimeSelect from 'components/datetimeSelect'
import noData from 'components/noData'
import { GetUserWaitSettleReward } from 'api/directReward'
import utils from 'utils/utils'
export default {
  components: {
    datetimeSelect,
    noData
  },
  data() {
    return {
      active:1,
      bgImg: require('assets/images/integrate.png'),
      // 时间筛选
      datetime: '',
      dateSelect: false,
      Icon: 'arrow-down',

      TotalMoney: 0,
      requestData: {
        PageIndex: 1,
        PageSize: 10,
        StartTime:'',
        EndTime:'',
      },
      RewardList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  watch: {
    dateSelect(newVal, oldVal) {
      if (newVal === true) {
        this.Icon = 'arrow-up'
      } else {
        this.Icon = 'arrow-down'
      }
    }
  },
  created() {
    this.datetime = utils.dateFomat('yyyy', new Date()) + '年' + utils.dateFomat('m', new Date()) + '月'
    const value = utils.thisMonthS()
    // this.requestData.StartTime = value.startDate ? value.startDate.replace(/\./g, '-') : null
    // this.requestData.EndTime = value.endDate ? value.endDate.replace(/\./g, '-') : null
    this.GetUserWaitSettleReward()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    openDateSelect(num) {
      this.active=num;
      if(num==2){
      this.dateSelect = true
      }else{
         this.requestData.StartTime = ''
          this.requestData.EndTime = ''
          this.requestData.PageIndex = 1
          this.RewardList = []
          this.GetUserWaitSettleReward()
      }
    },
    onConfirm(value) {
      console.log(value)
      this.datetime = utils.dateFomat('yyyy', value) + '年' + utils.dateFomat('m', value) + '月'
      const _value = utils.chooseMonthS(value)
      this.requestData.StartTime = _value.startDate ? _value.startDate.replace(/\./g, '-') : null
      this.requestData.EndTime = _value.endDate ? _value.endDate.replace(/\./g, '-') : null
      this.requestData.PageIndex = 1
      this.RewardList = []
      this.GetUserWaitSettleReward()
      this.dateSelect = false
    },
    clickOverlay() {
      this.dateSelect = false
    },

    GetUserWaitSettleReward() {
      GetUserWaitSettleReward(this.requestData).then(res => {
        if (res) {
          // this.TotalMoney = res.Data.TotalMoney
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              this.RewardList.push(tem)
            })
          }
          this.TotalMoney = JSON.stringify(res.OtherData) || 0
          this.TotalMoney = this.TotalMoney === 'null' ? 0 : this.TotalMoney
          this.totalAmout = res.TotalAmout
          this.scollRequest = true
        }
      })
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (utils.getScrollHeight() - utils.getClientHeight() - utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          console.log('加载')
          if (_this.requestData.PageIndex < _this.totalAmout) {
            _this.requestData.PageIndex++
            _this.GetUserWaitSettleReward()
          } else {
            console.log('end')
            _this.end = true
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-nav-bar__title,/deep/.van-icon{
    color:$colorF;
  }
}
/deep/.van-hairline--bottom::after{
  border-bottom: none;
}
.date-box {
  height: 50px;
  line-height: 50px;
}
.date-box.bg-primary{
  color: #fff;
}
.bg-box{
  width: 100%;
  height: 100px;
  @include bg-primary;
  top: 0;
  left: 0;
  z-index: 0;
}
.out-box{
  position: relative;
  z-index: 1;
  border-radius: 24px 58px 24px 58px;
  background: $colorF;
  padding: 32px;
  .inner-box{
    border-radius: 58px;
    @include bg-primary;
    color:$colorF;
    font-size: 28px;
    padding: 42px 42px 70px;
  }
}
.content{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  padding: 20px;
  &:after{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @include bg-primary;
    opacity: 0.05;
  }
}
</style>
